<template>
  <div class="submit-custom-container custom-container">
    <el-card class="main-card">
      <div slot="header" class="card-header">
        <span>提交服装定制申请</span>
        <el-button type="text" @click="resetForm('customForm')">重置表单</el-button>
      </div>
      
      <el-steps :active="activeStep" finish-status="success" simple style="margin-bottom: 30px;">
        <el-step title="基本信息" icon="el-icon-edit"></el-step>
        <el-step title="设计要求" icon="el-icon-picture"></el-step>
        <el-step title="确认提交" icon="el-icon-check"></el-step>
      </el-steps>
      
      <el-form :model="customForm" :rules="rules" ref="customForm" label-width="100px" label-position="right">
        <!-- 第一步：基本信息 -->
        <div v-show="activeStep === 0">
          <el-form-item label="服装类型" prop="clothingType">
            <el-select v-model="customForm.clothingType" placeholder="请选择服装类型" style="width: 100%">
              <el-option v-for="item in clothingTypes" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          
          <el-form-item label="性别" prop="gender">
            <el-radio-group v-model="customForm.gender">
              <el-radio label="male">男装</el-radio>
              <el-radio label="female">女装</el-radio>
              <el-radio label="unisex">中性</el-radio>
            </el-radio-group>
          </el-form-item>
          
          <el-form-item label="尺码信息" prop="size">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-select v-model="customForm.size.standard" placeholder="标准尺码" style="width: 100%">
                  <el-option v-for="item in standardSizes" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-col>
              <el-col :span="12">
                <el-button type="primary" @click="dialogVisible = true" style="width: 100%">填写详细尺寸</el-button>
              </el-col>
            </el-row>
          </el-form-item>
          
          <el-form-item label="面料选择" prop="fabric">
            <el-select v-model="customForm.fabric" placeholder="请选择面料" style="width: 100%">
              <el-option v-for="item in fabricTypes" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          
          <el-form-item label="颜色选择" prop="color">
            <el-color-picker v-model="customForm.color" show-alpha></el-color-picker>
            <span style="margin-left: 10px;">{{ customForm.color }}</span>
          </el-form-item>
        </div>
        
        <!-- 第二步：设计要求 -->
        <div v-show="activeStep === 1">
          <el-form-item label="设计风格" prop="style">
            <el-select v-model="customForm.style" placeholder="请选择设计风格" style="width: 100%">
              <el-option v-for="item in styleTypes" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          
          <el-form-item label="参考图片" prop="referenceImages">
            <el-upload
              action="#"
              list-type="picture-card"
              :auto-upload="false"
              :file-list="fileList"
              :on-preview="handlePreview"
              :on-change="handleFileChange"
              :on-remove="handleRemove">
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogImageVisible">
              <img width="100%" :src="dialogImageUrl" alt="预览图">
            </el-dialog>
          </el-form-item>
          
          <el-form-item label="特殊要求" prop="specialRequirements">
            <el-input
              type="textarea"
              :rows="4"
              placeholder="请详细描述您的特殊需求..."
              v-model="customForm.specialRequirements">
            </el-input>
          </el-form-item>
          
          <el-form-item label="设计师指定" prop="designerRequirement">
            <el-switch
              v-model="customForm.designerRequirement.required"
              active-text="指定设计师"
              inactive-text="系统分配">
            </el-switch>
            
            <div v-if="customForm.designerRequirement.required" style="margin-top: 15px;">
              <el-select v-model="customForm.designerRequirement.designerId" placeholder="请选择设计师" style="width: 100%">
                <el-option v-for="designer in designers" :key="designer.id" :label="designer.name" :value="designer.id">
                  <div style="display: flex; align-items: center;">
                    <img :src="designer.avatar" style="width: 30px; height: 30px; border-radius: 50%; margin-right: 10px;">
                    <span>{{ designer.name }} - {{ designer.level }}</span>
                  </div>
                </el-option>
              </el-select>
            </div>
          </el-form-item>
        </div>
        
        <!-- 第三步：确认提交 -->
        <div v-show="activeStep === 2">
          <el-card class="summary-card">
            <div slot="header">定制概要</div>
            <el-descriptions :column="2" border>
              <el-descriptions-item label="服装类型">{{ getTypeName(customForm.clothingType) }}</el-descriptions-item>
              <el-descriptions-item label="性别">{{ getGenderName(customForm.gender) }}</el-descriptions-item>
              <el-descriptions-item label="尺码">{{ getSizeName(customForm.size.standard) }}</el-descriptions-item>
              <el-descriptions-item label="面料">{{ getFabricName(customForm.fabric) }}</el-descriptions-item>
              <el-descriptions-item label="颜色">
                <span class="color-box" :style="{backgroundColor: customForm.color}"></span>
                {{ customForm.color }}
              </el-descriptions-item>
              <el-descriptions-item label="设计风格">{{ getStyleName(customForm.style) }}</el-descriptions-item>
              <el-descriptions-item label="设计师">{{ customForm.designerRequirement.required ? getDesignerName(customForm.designerRequirement.designerId) : '系统分配' }}</el-descriptions-item>
              <el-descriptions-item label="参考图片">{{ fileList.length }}张</el-descriptions-item>
              <el-descriptions-item :span="2" label="特殊要求">{{ customForm.specialRequirements || '无' }}</el-descriptions-item>
            </el-descriptions>
          </el-card>
          
          <el-form-item label="预算" prop="budget" style="margin-top: 20px;">
            <el-slider
              v-model="customForm.budget"
              :step="100"
              :min="500"
              :max="10000"
              show-stops
              show-input>
            </el-slider>
          </el-form-item>
          
          <el-form-item label="交付日期" prop="deliveryDate">
            <el-date-picker
              v-model="customForm.deliveryDate"
              type="date"
              placeholder="选择期望交付日期"
              :picker-options="pickerOptions"
              style="width: 100%">
            </el-date-picker>
          </el-form-item>
          
          <el-form-item label="支付方式" prop="paymentMethod">
            <el-radio-group v-model="customForm.paymentMethod">
              <el-radio label="alipay">支付宝</el-radio>
              <el-radio label="wechat">微信支付</el-radio>
              <el-radio label="card">银行卡</el-radio>
            </el-radio-group>
          </el-form-item>
          
          <el-form-item>
            <el-checkbox v-model="customForm.agreement">我已阅读并同意《服装定制服务协议》</el-checkbox>
          </el-form-item>
        </div>
        
        <el-form-item>
          <el-button v-if="activeStep > 0" @click="prev">上一步</el-button>
          <el-button v-if="activeStep < 2" type="primary" @click="next">下一步</el-button>
          <el-button v-if="activeStep === 2" type="success" @click="submitForm('customForm')" :disabled="!customForm.agreement">提交申请</el-button>
        </el-form-item>
      </el-form>
      
      <!-- 详细尺寸对话框 -->
      <el-dialog title="填写详细尺寸" :visible.sync="dialogVisible" width="50%">
        <el-form :model="customForm.size.detailed" label-width="120px">
          <el-form-item label="肩宽(cm)">
            <el-input-number v-model="customForm.size.detailed.shoulder" :min="20" :max="60"></el-input-number>
          </el-form-item>
          <el-form-item label="胸围(cm)">
            <el-input-number v-model="customForm.size.detailed.chest" :min="60" :max="150"></el-input-number>
          </el-form-item>
          <el-form-item label="腰围(cm)">
            <el-input-number v-model="customForm.size.detailed.waist" :min="50" :max="140"></el-input-number>
          </el-form-item>
          <el-form-item label="臀围(cm)">
            <el-input-number v-model="customForm.size.detailed.hip" :min="70" :max="150"></el-input-number>
          </el-form-item>
          <el-form-item label="袖长(cm)">
            <el-input-number v-model="customForm.size.detailed.sleeveLength" :min="40" :max="80"></el-input-number>
          </el-form-item>
          <el-form-item label="衣长(cm)">
            <el-input-number v-model="customForm.size.detailed.length" :min="50" :max="120"></el-input-number>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'SubmitCustom',
  data() {
    return {
      activeStep: 0,
      dialogVisible: false,
      dialogImageVisible: false,
      dialogImageUrl: '',
      fileList: [],
      customForm: {
        clothingType: '',
        gender: 'male',
        size: {
          standard: '',
          detailed: {
            shoulder: 40,
            chest: 90,
            waist: 75,
            hip: 90,
            sleeveLength: 60,
            length: 70
          }
        },
        fabric: '',
        color: '#409EFF',
        style: '',
        specialRequirements: '',
        designerRequirement: {
          required: false,
          designerId: ''
        },
        budget: 1000,
        deliveryDate: '',
        paymentMethod: 'alipay',
        agreement: false,
        referenceImages: []
      },
      rules: {
        clothingType: [{ required: true, message: '请选择服装类型', trigger: 'change' }],
        gender: [{ required: true, message: '请选择性别', trigger: 'change' }],
        'size.standard': [{ required: true, message: '请选择尺码', trigger: 'change' }],
        fabric: [{ required: true, message: '请选择面料', trigger: 'change' }],
        color: [{ required: true, message: '请选择颜色', trigger: 'change' }],
        style: [{ required: true, message: '请选择设计风格', trigger: 'change' }],
        budget: [{ required: true, message: '请设置预算', trigger: 'change' }],
        deliveryDate: [{ required: true, message: '请选择期望交付日期', trigger: 'change' }],
        paymentMethod: [{ required: true, message: '请选择支付方式', trigger: 'change' }]
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() + 3600 * 1000 * 24 * 15;
        }
      },
      clothingTypes: [
        { value: 'shirt', label: '衬衫' },
        { value: 'tshirt', label: 'T恤' },
        { value: 'dress', label: '连衣裙' },
        { value: 'suit', label: '西装' },
        { value: 'pants', label: '裤子' },
        { value: 'coat', label: '外套' },
        { value: 'skirt', label: '裙子' }
      ],
      standardSizes: [
        { value: 'XS', label: 'XS' },
        { value: 'S', label: 'S' },
        { value: 'M', label: 'M' },
        { value: 'L', label: 'L' },
        { value: 'XL', label: 'XL' },
        { value: 'XXL', label: 'XXL' },
        { value: 'XXXL', label: 'XXXL' }
      ],
      fabricTypes: [
        { value: 'cotton', label: '棉' },
        { value: 'linen', label: '亚麻' },
        { value: 'silk', label: '丝绸' },
        { value: 'wool', label: '羊毛' },
        { value: 'polyester', label: '聚酯纤维' },
        { value: 'denim', label: '牛仔布' },
        { value: 'leather', label: '皮革' }
      ],
      styleTypes: [
        { value: 'casual', label: '休闲' },
        { value: 'formal', label: '正式' },
        { value: 'business', label: '商务' },
        { value: 'sports', label: '运动' },
        { value: 'vintage', label: '复古' },
        { value: 'bohemian', label: '波西米亚' },
        { value: 'minimalist', label: '极简' }
      ],
      designers: [
        { id: 1, name: '王艺', level: '高级设计师', avatar: '../assets/images/designer1.jpg' },
        { id: 2, name: '李敏', level: '资深设计师', avatar: '../assets/images/designer2.jpg' },
        { id: 3, name: '张鑫', level: '首席设计师', avatar: '../assets/images/designer3.jpg' },
        { id: 4, name: '陈慧', level: '高级设计师', avatar: '../assets/images/designer4.jpg' },
      ]
    }
  },
  methods: {
    next() {
      // 验证当前步骤的表单
      const validateFields = this.getValidateFields(this.activeStep);
      this.$refs.customForm.validateField(validateFields, (valid) => {
        if (valid) {
          this.activeStep += 1;
        }
      });
    },
    prev() {
      this.activeStep -= 1;
    },
    getValidateFields(step) {
      const fieldMaps = [
        ['clothingType', 'gender', 'size.standard', 'fabric', 'color'],
        ['style', 'specialRequirements'],
        ['budget', 'deliveryDate', 'paymentMethod']
      ];
      return fieldMaps[step] || [];
    },
    handleRemove(file) {
      this.fileList = this.fileList.filter(item => item.uid !== file.uid);
    },
    handlePreview(file) {
      this.dialogImageUrl = file.url || URL.createObjectURL(file.raw);
      this.dialogImageVisible = true;
    },
    handleFileChange(file) {
      this.fileList.push(file);
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.activeStep = 0;
      this.fileList = [];
      this.customForm.agreement = false;
      this.customForm.designerRequirement.required = false;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (!this.customForm.agreement) {
            this.$message.warning('请先同意服务协议');
            return;
          }
          
          // 处理文件上传
          const formData = { ...this.customForm };
          formData.referenceImages = this.fileList.map(file => file.raw);
          
          // 模拟提交
          this.$message.success('定制申请已提交成功！');
          setTimeout(() => {
            this.$router.push('/custom/list');
          }, 1500);
        } else {
          this.$message.error('表单信息有误，请检查后重新提交');
        }
      });
    },
    getTypeName(type) {
      const found = this.clothingTypes.find(item => item.value === type);
      return found ? found.label : type;
    },
    getGenderName(gender) {
      const map = { male: '男装', female: '女装', unisex: '中性' };
      return map[gender] || gender;
    },
    getSizeName(size) {
      return size;
    },
    getFabricName(fabric) {
      const found = this.fabricTypes.find(item => item.value === fabric);
      return found ? found.label : fabric;
    },
    getStyleName(style) {
      const found = this.styleTypes.find(item => item.value === style);
      return found ? found.label : style;
    },
    getDesignerName(id) {
      const found = this.designers.find(item => item.id === id);
      return found ? found.name : id;
    }
  }
}
</script>

<style scoped>
.submit-custom-container {
  padding: 20px;
  box-sizing: border-box;
  min-height: calc(100vh - 60px);
  background-color: var(--page-background);
}

.main-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.summary-card {
  margin-bottom: 20px;
}

.color-box {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  margin-right: 10px;
  border: 1px solid #ddd;
  vertical-align: middle;
}
</style> 